<template>
  <div id="newsDetail">
    <dp-Header></dp-Header>
    <dp-Banner></dp-Banner>
    <div class="containerset">
      <div class="titleNews">{{newsDetailcurrent.titleNews}}</div>
      <div class="createdDisplay">发布时间：{{newsDetailcurrent.createdDisplay}}<template v-if="newsDetailcurrent.sourceNews"> &nbsp;来源：{{newsDetailcurrent.sourceNews}}</template></div>
      <div class="newsdetail">
        <div class="subTitleNews" v-if="newsDetailcurrent.subTitleNews">介绍：{{newsDetailcurrent.subTitleNews}}</div>
        <div class="contentNews" v-html="newsDetailcurrent.contentNews"></div>
      </div>
      <template v-if="urlVideo">
        <div style="text-align: center">
          <video style="width:50%;height: 400px;" id="video" webkit-playsinline="true"  preload="auto" controls="controls">
            <source id="videoSource"  type="video/mp4">
            您的浏览器不支持该视频格式。
          </video>
        </div>
      </template>
      <div class="tailNews"  v-if="newsDetailcurrent.tailNews">脚注：{{newsDetailcurrent.tailNews}}</div>
      <div class="previous">
        <div v-if="newsDetailprevious">[前一篇]&nbsp;
          <router-link :to="{path:'/newsDetail',query:{ id:newsDetailprevious.id }}" @click.native="flushCom">
            {{newsDetailprevious.titleNews}}
          </router-link>
        </div>
        <div v-if="newsDetailnext">[后一篇]&nbsp;
          <router-link :to="{path:'/newsDetail',query:{ id:newsDetailnext.id }}" @click.native="flushCom">
            {{newsDetailnext.titleNews}}
          </router-link>
        </div>
      </div>
    </div>
    <dp-Foot></dp-Foot>
  </div>
</template>

<script>
  import global from './global'

  export default {
    name:'newsDetail',
    data(){
      return{
        newsDetailcurrent:'',
        newsDetailprevious:'',
        newsDetailnext:'',
        urlVideo:''
      }
    },
    created:function(){
      var newsID = this.$route.query.id;
      var url = global.apiGlobal + "contentNews/fa/content";
      var data = {
        id:newsID,
      }
      this.$http.post(url, JSON.stringify(data)).then(function (data) {
        if(data.status == 200){
          console.log(data.body);
          if(data.body.content &&  data.body.content != ""){
            this.newsDetailcurrent = data.body.content.current;
            if(data.body.content.previous &&  data.body.content.previous != ""){
              this.newsDetailprevious = data.body.content.previous;
            }
            if(data.body.content.next &&  data.body.content.next != ""){
              this.newsDetailnext = data.body.content.next;
            }
            //视频播放
            var _videoPlay = document.getElementById("video");
            var _videoSource = document.getElementById("video");
            this.urlVideo = data.body.content.current.urlVideo;
            if( _videoSource &&  _videoSource != ""){
              _videoSource.src = data.body.content.current.urlVideo;
            }
          }
          return;
        }
      }, function (response) {
        console.log(response)
      })
    },
    methods:{
      flushCom:function(){
        this.$router.go(0);
      }
    }
  }
</script>

<style>
  .newsdetail{
    line-height: 2;
  }

 .titleNews{
   margin-top: 30px;
   padding: 15px 0;
   font-size: 20px;
   text-align: center;
   font-weight: bold;
 }

  .subTitleNews{
    font-size: 15px;
    line-height: 2;
    color: #999;
    padding: 15px;
  }

  .createdDisplay{
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px;
  }

  .contentNews{
    padding: 10px 0;
  }

  .previous{
    border-top: 1px solid #f0f0f0;
    margin-bottom: 50px;
    padding: 15px 0;
    color: #666;
    font-size: 15px;
  }

  .previous div{
    margin-bottom: 15px;
  }

  .tailNews{
    border-top: 1px solid #f0f0f0;
    padding: 15px 0;
    color: #666;
    font-size: 15px;
  }
</style>
